<template>
    <div class="page">
      <div class="user-add">
        <el-row type="flex"  justify="center">
          <el-col :span="8">
            <div  class="img-upload" >
              <div class="img-upload-div">
                <b>照片:</b>
              </div>
              <div class="img-upload-div">
                <el-upload
                  class="avatar-uploader"
                  :action="baseURL+'/ImgUpload/upload'"
                  :show-file-list="false"
                  :http-request="httpUpload"
                  :on-change="fileChange"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

              </div>

            </div>
            <div  class="img-url"  :title="imageUrl" style="cursor:pointer;">
              <div class="img-upload-div" style="visibility: hidden">
                <!-- 用来占位 -->
                <span>照片:</span>
              </div>
              <div  class="img-url-span">
                 {{ imageUrl }}
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>姓名:</b>
                </div>
                <div class="item-div">
                  <!-- <el-input v-model="input" placeholder="请输入内容"></el-input>-->
                  <el-input  placeholder="请输入姓名"></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>昵称:</b>
                </div>
                <div class="item-div">
                  <el-input  placeholder="请输入昵称"></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>性别:</b>
                </div>
                <div class="item-div">
                  <el-input  placeholder="请输入性别"></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>生日:</b>
                </div>
                <div class="item-div">
                  <el-input  placeholder="请输入生日"></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>宿舍:</b>
                </div>
                <div class="item-div">
                  <el-input  placeholder="请输入宿舍"></el-input>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <div class="item">
                <div class="item-div">
                  <b>班级:</b>
                </div>
                <div class="item-div">
                  <el-input  placeholder="请输入班级"></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>分组:</b>
                </div>
                <div class="item-div">
                  <el-input  placeholder="请输入分组"></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>电话:</b>
                </div>
                <div class="item-div">
                  <el-input  placeholder="请输入电话"></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>邮箱:</b>
                </div>
                <div class="item-div">
                  <el-input  placeholder="请输入邮箱"></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="item">
                <div class="item-div">
                  <b>微信:</b>
                </div>
                <div class="item-div">
                  <el-input  placeholder="请输入微信"></el-input>
                </div>
              </div>
            </div>
            <div>
              <div class="item-textarea">
                <div class="item-textarea-div">
                  <b>备注:</b>
                </div>
                <div class="item-textarea-div">
                  <el-input class="input-textarea" :rows="5" type="textarea"  placeholder="请输入备注"></el-input>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="user-add-button">
        <el-row type="flex"  justify="center">
          <el-col :span="4">
            <div style="width: 100%; text-align: right; margin-right: 10px">
              <el-button>取消</el-button>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="width: 100%; text-align: left;  margin-left: 10px">
              <el-button type="primary">保存</el-button>
            </div>
          </el-col>
        </el-row>
      </div>

    </div>
</template>

<script>
  // 添加学生信息, 选择所属班级, 组, 宿舍, TODO:图片上传
    export default {
      data() {
        return {
          file: '',
          imageUrl: '',
          baseURL:''
        };
      },
      mounted(){
        this.baseURL = this.$baseURL
      },
      methods: {
        httpUpload() {
          const fd = new FormData()
          fd.append('file', this.file.raw)
          const config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
          this.$axios.post(this.baseURL+'/ImgUpload/upload', fd, config)
            .then((result)=>{
              if(result.status===200){
                return result.data;
              }else{
                alert('检查请求')
              }
            })
            .then((json)=>{
              if(json.status == 200){
                // this.imageUrl = URL.createObjectURL(this.file.raw)

                // console.log(json)
                // this.imageUrlUpload = json.data
                // this.$emit('imageUrl',this.imageUrlUpload);
              }else{
                // 其它状态, 弹窗提示
                this.$alert(json.errorMsg, '注意', {
                  showConfirmButton: false,
                  callback: action => {}
                });
              }
            })
            .catch((e)=>{
              alert(e.toString())
            })
        },
        handleAvatarSuccess(res, file) {
          // this.imageUrl = URL.createObjectURL(file.raw);
        },
        fileChange(file) {
          this.file = file
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        }
      }
    }
</script>

<style scoped>
.page{
  width: 100%;
  height: 100%;
  padding-top: 1px ;
}
.user-add{
  padding: 40px 40px;
  height: 480px;
  background: white;
}
.user-add-button{
  background: white;
}
.img-upload{
  height: 153px;

}
.img-upload-div{
  float: left;
  margin-right: 10px;
  height: 100%;
}
.item{
  height: 60px;
  line-height: 60px;
}
.item-div{
  float: left;
  margin-right: 10px;
  height: 100%;
}
.item-textarea{
  height: 30px;
  line-height: 30px;
}
.item-textarea-div{
  float: left;
  margin-right: 10px;
}
.input-textarea{
  width: 380px;
}

/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
.img-url{
  height: 22px;
}
.img-url-span{
  width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>
